import Taro from "@tarojs/taro";
import { Button, View } from "@tarojs/components";
import { Overlay, Icon } from "@antmjs/vantui";
import { GetOpenid, Log } from "@/api";
import { useEffect, useState } from "react";

// const audio = Taro.createInnerAudioContext();
// audio.src =
// 	"https://applets-1302975996.cos.ap-nanjing.myqcloud.com/fenbide/sounds/bg.mp3";

export default function () {
	const [showOverlay, setShowOverlay] = useState<boolean>(false);

	useEffect(() => {
		Taro.setInnerAudioOption({
			obeyMuteSwitch: false,
		});

		GetOpenid().then(() => {
			if (Taro.getStorageSync("readAlready_privacy")) {
				// audio.pause();
				Taro.redirectTo({
					url: "/pages/h5/index",
				});
			} else {
				setShowOverlay(true);
				// audio.play();
			}
		});

		return () => {
			// audio.pause();
		};
	}, []);

	return (
		<>
			<View
				className=" min-h-screen bg-cover bg-center"
				style={{
					backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/fenbide/loading-bg.jpg)`,
				}}
			></View>
			<Overlay
				show={showOverlay}
				className="pt-[150px]"
				onClick={() => {
					Log({
						eventName: "点击同意",
					});
				}}
			>
				<View
					className="w-[674px] h-[926px] bg-full mx-auto relative pt-[38px]"
					style={{
						backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/fenbide/privacy-bg.png)`,
					}}
				>
					{/* close */}
					<View
						className=" absolute -top-[70px] right-0"
						onClick={async () => {
							await Log({
								eventName: "点击拒绝",
							});

							Taro.exitMiniProgram();
						}}
					>
						<Icon size="24px" name="cross" className="text-white"></Icon>
					</View>

					{/* title */}
					<View
						className="w-[286px] h-[76px] bg-full block mx-auto"
						style={{
							backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/fenbide/privacy-1.png)`,
						}}
					></View>

					<View className=" overflow-auto px-4  h-[750px] text-sm leading-6 mt-4">
						<View>活动时间：2024年8月15日至2024年8月24日</View>
						<View>活动主办方：中美天津史克制药有限公司</View>
						<View>
							活动期间，凡成功助力芬必得大山梦想音乐会，即可参与抽奖活动，奖品如下：
							·芬必得定制版黑胶蓝牙音箱，共计150个
							·芬必得定制版愈痛钥匙扣，共计500个
						</View>
						<View className="mt-4">
							活动参与流程：
							用户进入活动页面，成功点击【一键助力】——【立即抽奖】即可进入抽奖页面参与抽奖，点击【保存并分享】分享给2位好友，即可多获得一次抽奖机会，每个ID最多有3次抽奖机会。
							中奖后，点击【即刻领取】，在弹框中填写您的个人姓名、电话及收件地址，点击确认提交，请确保您填写的信息正确无误，以便将奖品邮寄到您的手中，提交信息即为认可本次信息授权。
							本次活动所有奖品为实体奖品，将于活动结束后30个工作日内，以快递形式陆续寄出。
						</View>
						<View className="mt-4">
							注意事项：
							用户参与活动即默认同意主办方获取你的必要信息（仅用于寄送奖品，除此以外我们不会与任何无关第三方分享您的信息）。
						</View>
						<View className="mt-4">
							本次活最终解释权归主办方-中美天津史克制药有限公司所有。
						</View>
					</View>
				</View>

				<Button
					className="w-[352px] h-[82px] bg-full bg-transparent active:scale-95 mt-4"
					style={{
						backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/fenbide/privacy-2.png)`,
					}}
					onClick={() => {
						Taro.setStorageSync("readAlready_privacy", "true");
						Taro.navigateTo({
							url: "/pages/h5/index",
						});
						// audio.pause();
					}}
				/>
			</Overlay>
		</>
	);
}
